<template> <!-- 排行榜 -->
	<view class="wrap">
		<u-sticky offset-top="0">
			<view class="layout-tab flex justify-between bg-white">
				<view :class="['tab half', {active: tabIndex == 1}]" @click="handTab(1)">得分榜</view>
				<view :class="['tab half', {active: tabIndex == 2}]" @click="handTab(2)">胜场榜</view>
			</view>
		</u-sticky>
		<view class="layout-list bg-white">
			<view class="item flex align-center" v-for="(item,index) in list" :key="index">
				<view class="icon" v-if="index < 3">
					<image class="full" :src="'/static/image/rank-'+ index +'.png'" mode=""></image>
				</view>
				<view class="xu" v-else>{{ index + 1}}</view>
				<view class="hd">
					<u-image :src="item.hd" width="80rpx" height="80rpx" shape="circle"></u-image>
				</view>
				<view class="name text-single flex-1">{{ item.name }}</view>
				<view class="number">{{ item.number }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1,
				hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [
					{
						id: 0,
						hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '这里是微信昵称还没有想好',
						number: 120
					},
					{
						id: 0,
						hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '还没有想好',
						number: 120
					},
					{
						id: 0,
						hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '昵称还没有想好',
						number: 120
					},
					{
						id: 0,
						hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '微信昵称',
						number: 120
					},
					{
						id: 0,
						hd: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '这里是没有想好',
						number: 120
					},
				]
			}
		},
		methods: {
			handTab(index) {
				this.tabIndex = index
			},
		},
		onLoad() {
		
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.layout-tab {
		position: relative;
		// height: 70rpx;
		border: 1px solid rgba(22, 132, 252, 1);
		.tab {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 70rpx;
			padding: 14rpx 0;
			text-align: center;
			color: #c2c2c2;
			box-sizing: border-box;
			&:nth-child(1) {
				border-right: 1px solid #0098FF;
			}
		}
		.active {
			color: #0098FF;
		}
	}
	.layout-list {
		margin: 36rpx 36rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.item {
			height: 150rpx;
			padding: 0 50rpx;
			border-bottom: 1px solid #ddd;
			&:last-child {
				border-bottom: none;
			}
			.icon {
				margin-right: 40rpx;
				width: 70rpx;
				height: 80rpx;
			}
			.xu {
				margin-right: 40rpx;
				width: 70rpx;
				font-size: 32rpx;
				color: #0098FF;
				text-align: center;
			}
			.name {
				padding: 0 40rpx;
				font-size: 32rpx;
				line-height: 40rpx;
				color: #101010;
			}
			.number {
				width: 100rpx;
				font-size: 40rpx;
				font-weight: 600;
				line-height: 1;
				color: #FC2A2A;
			}
		}
		.item:nth-child(1) {
			background: #FFF8CF;
		}
		.item:nth-child(2) {
			background: #F1F1F1;
		}
		.item:nth-child(3) {
			background: #FDF5EB;
		}
	}
</style>
